<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>管线铺设辅助系统（MST）</title>
    <link rel="stylesheet" href="/static/css/styles.css" />
</head>
<body>
<div class="container">
    <h1>管线铺设辅助系统（Prim / Kruskal）</h1>

    <div class="controls">
        <div class="row">
            <label class="btn">
                选择CSV文件
                <input id="fileInput" type="file" accept=".csv" hidden />
            </label>
            <button id="loadSampleBtn">加载示例数据</button>
            <span id="dataStatus" class="status">未加载</span>
        </div>

        <div class="row">
            <label><input type="radio" name="algo" value="prim" checked /> Prim 算法</label>
            <label><input type="radio" name="algo" value="kruskal" /> Kruskal 算法</label>
            <button id="runBtn">执行算法</button>
            <span id="runStatus" class="status"></span>
        </div>

        <div class="row">
            <button id="playBtn">播放</button>
            <button id="pauseBtn">暂停</button>
            <button id="nextBtn">下一步</button>
            <button id="resetBtn">重置</button>
            <label>速度
                <input id="speedRange" type="range" min="200" max="2000" step="100" value="800" />
            </label>
        </div>
    </div>

    <div class="layout">
        <div class="left">
            <svg id="graph" width="1000" height="600"></svg>
        </div>
        <div class="right">
            <div id="stats">
                <h3>方案统计</h3>
                <div>建筑数量：<span id="buildingCount">0</span></div>
                <div>总铺设距离：<span id="totalCost">0</span> 米</div>
                <div>算法：<span id="algoName">-</span></div>
                <button id="downloadBtn">导出文本方案</button>
            </div>
            <div id="stepsPanel">
                <h3>生成过程</h3>
                <ol id="stepsList"></ol>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/app.js"></script>
</body>
</html>